<template>
  <div class="box">
    <el-card style="width: 40%; margin-right: 10px; height: 77vh; overflow-y: scroll;">
       <el-divider content-position="left">组织架构</el-divider> 
       <el-tree node-key="id" style="max-width: 600px" :data="data1" show-checkbox :props="defaultProps" @check="checkChange" @node-click="handleNodeClick" />
    </el-card>
    <el-card style="width: 60%; height: 77vh; overflow-y: scroll;">
      <el-divider content-position="left">权限列表</el-divider> 
      <el-tree node-key="id" style="max-width: 600px" :data="data2" show-checkbox :props="defaultProps" @node-click="handleNodeClick" />
    </el-card>
  </div>
  <el-card style="width: 100%; margin-top: 10px; text-align: center;">
    <el-button type="primary">保存</el-button>
  </el-card>
</template>
<script setup lang="ts">
  interface Tree {
    label: string
    id: string
    children?: Tree[]
  }
  const handleNodeClick = (data: Tree) => {
    console.log(data)
  }
  const data1: Tree[] = [
    {
      label: '资讯部',
      id: '1',
      children: [
        {
          label: '王辉',
          id: '101'
        },
        {
          label: '张梦洁',
          id: '102'
        },
      ],
    }
  ]
  const data2: Tree[] = [
    {
      label: '首页',
      id: '1'
    },
    {
      label: '运营中心',
      id: '2',
      children: [
        {
          label: '仓储部',
          id: '201',
        },
        {
          label: '探针生产部',
          id: '202',
        },
        {
          label: '生产计划',
          id: '203',
        },
        {
          label: 'SMT生产部',
          id: '204',
        }
      ],
    },
    {
      label: '支持中心',
      id: '3',
      children: [
        {
          label: '人资行政部',
          id: '301',
        },
        {
          label: '咨询部',
          id: '302',
        },
        {
          label: '财务部',
          id: '303',
        },
        {
          label: '采购部',
          id: '304',
        }
      ],
    },
    {
      label: '市场开发中心',
      id: '4',
      children: [
        {
          label: '应用工程部',
          id: '401',
        },
        {
          label: '销售部',
          id: '402',
        }
      ],
    },
    {
      label: '测试版产品中心',
      id: '5',
      children: [
        {
          label: '测试板产品部',
          id: '501',
        },
        {
          label: '测试方案部',
          id: '502',
        }
      ],
    },
    {
      label: '陶瓷薄膜产品中心',
      id: '6',
      children: [
        {
          label: '陶瓷薄膜生产部',
          id: '601',
        },
        {
          label: '陶瓷薄膜研发部',
          id: '602',
        }
      ],
    },
    {
      label: '研发中心',
      id: '7',
      children: [
        {
          label: '系统方案及仿真部',
          id: '701',
        },
        {
          label: '设备开发部',
          id: '702',
        },
        {
          label: 'SOC探针卡产品部',
          id: '703',
        },
        {
          label: '存储探针卡产品部',
          id: '704',
        },
        {
          label: '探针及老化工艺部',
          id: '705',
        },
        {
          label: '陶瓷薄膜研发部',
          id: '706',
        }
      ],
    },
    {
      label: '工程管理中心',
      id: '8',
      children: [
        {
          label: '项目工程部',
          id: '801',
        },
        {
          label: 'EHS部',
          id: '802',
        },
        {
          label: '厂务工程部',
          id: '803',
        },
        {
          label: '设备部',
          id: '804',
        }
      ],
    },
    {
      label: '质量中心',
      id: '9',
      children: [
        {
          label: '品质保证部',
          id: '901',
        },
        {
          label: '品质管理部',
          id: '902',
        }
      ],
    },
    {
      label: '物料报价',
      id: '10',
    },
    {
      label: '系统维护',
      id: '11',
      children: [
        {
          label: '用户管理',
          id: '101'
        },
        {
          label: '权限管理',
          id: '102',
        },
        {
          label: '数据维护',
          id: '103',
        }
      ],
    }
  ]
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  const checkChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
    // console.log(checked)
  }
</script>
<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  // padding: 10px;
}
</style>
